<template>
    <div>
        <div class="row">
            <el-checkbox v-model="checked">内容区域</el-checkbox>
        </div>
        <div class="row">
            <el-checkbox v-model="checked" disabled>内容区域</el-checkbox>
        </div>
        <div class="row">
            <el-checkbox-group v-model="checkList">
                <el-checkbox label="复选框 A"></el-checkbox>
                <el-checkbox label="复选框 B"></el-checkbox>
                <el-checkbox label="复选框 C"></el-checkbox>
                <el-checkbox label="禁用" disabled></el-checkbox>
                <el-checkbox label="选中且禁用" disabled></el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="row">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="row">
            <el-checkbox-group 
                v-model="checkedCities"
                :min="1"
                :max="2">
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="row">
            <el-checkbox-group v-model="checkedCities">
                <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
            </el-checkbox-group>
        </div>
         <div class="row">
            <el-checkbox v-model="checked" label="备选项1" border></el-checkbox>
            <el-checkbox v-model="checked" label="备选项2" border></el-checkbox>
        </div>
    </div>
</template>

<script>
import ElCheckbox from '../../components/Checkbox/index'
import ElCheckboxButton from '../../components/CheckboxButton/index'
import ElCheckboxGroup from '../../components/CheckboxGroup'

const cityOptions = ['上海', '北京', '广州', '深圳'];

export default {
    data() {
      return {
        checked: true,
        checkList: ['选中且禁用','复选框 A'],

        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
        handleCheckAllChange(val) {
            this.checkedCities = val ? cityOptions : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        }
    },
    components: {
        ElCheckbox,
        ElCheckboxButton,
        ElCheckboxGroup
    }
}
</script>

<style>
.row {
    margin-top: 20px;
}
</style>